'use client';

import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { useSelectedLayoutSegment } from 'next/navigation';
import { RiHammerFill, RiHammerLine } from '@remixicon/react';
import classNames from '@/utils/classnames';
type ToolsNavProps = {
  className?: string;
};

const ToolsNav = ({ className }: ToolsNavProps) => {
  const { t } = useTranslation();
  const selectedSegment = useSelectedLayoutSegment();
  const activated = selectedSegment === 'tools';

  return (
    <Link
      to="/tools"
      className={classNames(
        className,
        'group',
        activated && 'bg-white shadow-md',
        activated ? 'text-primary-600' : 'text-gray-500 hover:bg-gray-200',
      )}
    >
      {activated ? <RiHammerFill className="mr-2 w-4 h-4" /> : <RiHammerLine className="mr-2 w-4 h-4" />}
      {t('common.menus.tools')}
    </Link>
  );
};

export default ToolsNav;
